<!-- 工作巡查主页面 -->
<template>
  <div class="spxc-content">
    <div class="main" id="map">
      <!-- <div id="lonlat2" class="pos"></div> -->
    </div>
    <div class="cleft">
      <gzxc-lb
        :undonelist="state.undonelist"
        :donelist="state.donelist"
        @back="oneClick"
      />
    </div>

    <div class="cright">
      <xcrw-xx :item="state.taskItem" />
    </div>
  </div>
</template>

<script setup>
import { gettasklist, gettaskroutes, starttask } from "@/api/videoplan.js";
import "ol/ol.css";
import { Map, View } from "ol";
import { Vector as VectorSource } from "ol/source.js";
import { Vector as VectorLayer } from "ol/layer.js";
import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import LineString from "ol/geom/LineString.js";
import MultiLineString from "ol/geom/MultiLineString.js";
import { Control, defaults as defaultControls } from "ol/control.js";
import MousePosition from "ol/control/MousePosition.js";
import { createStringXY } from "ol/coordinate.js";
import ImageWMS from "ol/source/ImageWMS.js";
import { Image as ImageLayer, Tile as TileLayer } from "ol/layer.js";
import {
  Circle as CircleStyle,
  Fill,
  RegularShape,
  Stroke,
  Style,
  Text,
  Icon,
} from "ol/style.js";

import gzxcLb from "./gzxcLb.vue";
import xcrwXx from "./xcrwXx.vue";
import { useMyStore } from "@/pinia/store.js";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  goc: 1,
  map: null,
  undonelist: [],
  donelist: [],
  taskItem: {},
  routelist: [],
  pointlayer: null,
  linelayer: null,
});

const initMap = () => {
  //   let wms = new ImageLayer({
  //     source: new ImageWMS({
  //       url: "/geoserver/bcd/wms",
  //       params: { LAYERS: "bcd", VERSION: "1.1.0" },
  //       ratio: 1,
  //       serverType: "geoserver",
  //     }),
  //   });
  state.map = new Map({
    target: "map",
    controls: defaultControls().extend([
      // new MousePosition({
      //   target: "lonlat2",
      //   coordinateFormat: createStringXY(6),
      //   undefinedHTML: " ",
      // }),
    ]),
    // layers: [wms],
    layers: [
      new ImageLayer({
        source: new ImageWMS({
          url: "/geoserver/bcd/wms",
          params: { LAYERS: "bcd", VERSION: "1.1.0" },
          ratio: 1,
          serverType: "geoserver",
        }),
      }),
    ],
    target: "map",
    view: new View({
      projection: "EPSG:4326",
      center: [117.69538, 38.994973],
      zoom: 14,
      maxZoom: 21,
      minZoom: 10,
    }),
  });
};

const getList = async () => {
  //   useApi.post("/api/inspect/staff/gettasklist").then((res) => {
  //     state.undonelist = [...(res.data.undonelist || [])];
  //     state.donelist = [...(res.data.donelist || [])];
  //   });
  try {
    let { data } = await gettasklist();
    state.undonelist = [...(data.undonelist || [])];
    state.donelist = [...(data.donelist || [])];
  } catch (e) {
    console.error(e);
  }
};
const oneClick = async (item, goto) => {
  console.log("oneClick----", item);
  state.taskItem = item;
  try {
    let { data } = await gettaskroutes({ taskId: item.taskId });
    state.routelist = [...(data.routeInfoList || [])];
    initLayer();
    if (goto) {
      let res = await starttask({ taskId: item.taskId });
      let store = useMyStore();
      store.params.taskItem = item;
      store.params.routeList = state.routelist;
      // navigateTo("/workPatrol/goPatrol");
      router.push({
        path: "/workPatrol/goPatrol",
      });
    }
  } catch (e) {
    console.error(e);
  }
};

const initLayer = () => {
  if (state.pointlayer != null) {
    state.map.removeLayer(state.pointlayer);
  }
  if (state.linelayer != null) {
    state.map.removeLayer(state.linelayer);
  }
  let linefs = [];
  let len = state.routelist.length;
  for (let i = 0; i < len - 1; i++) {
    linefs.push(
      new Feature({
        geometry: new LineString([
          [state.routelist[i].lng, state.routelist[i].lat],
          [state.routelist[i + 1].lng, state.routelist[i + 1].lat],
        ]),
        ...state.routelist[i + 1],
      })
    );
  }
  let lsource = new VectorSource({
    projection: "EPSG:4326",
    features: linefs,
  });
  state.linelayer = new VectorLayer({
    title: "linelayer",
    source: lsource,
    style: function (f) {
      return new Style({
        stroke: new Stroke({
          color: f.get("state") == 0 ? "#648afc" : "#4ec975",
          width: 5,
        }),
      });
    },
  });
  state.map.addLayer(state.linelayer);

  let pointfs = [];
  for (let item of state.routelist) {
    pointfs.push(
      new Feature({
        geometry: new Point([item.lng, item.lat]),
        ...item,
      })
    );
  }
  let psource = new VectorSource({
    projection: "EPSG:4326",
    features: pointfs,
  });
  state.pointlayer = new VectorLayer({
    title: "pointlayer",
    source: psource,
    style: function (f) {
      return new Style({
        image: new Icon({
          src: "/images/point1.png",
          scale: 0.5,
        }),
        text: new Text({
          text: [
            "\ue737",
            "20px iconfont",
            " " + f.get("deviceName"),
            "14px PingFangSC",
          ],
          offsetY: -40,
          font: "9pt serif",
          placement: "point",
          fill: new Fill({
            color: "#ffffff",
          }),
          backgroundFill: new Fill({
            color: "#4e618b",
          }),
          padding: [5, 5, 5, 5],
        }),
      });
    },
  });
  state.map.addLayer(state.pointlayer);

  setTimeout(() => {
    state.map.renderSync();
  }, 500);
  //放大到指定范围
  let extent = state.pointlayer.getSource().getExtent();
  if (extent && extent[0] != Infinity) {
    state.map.getView().fit(extent, {
      size: state.map.getSize(),
      padding: [100, 400, 100, 400],
      maxZoom: 21,
      duration: 500,
    });
  }
};

onMounted(() => {
  initMap();
  getList();
});
</script>

<style scoped>
.spxc-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.main {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cleft {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}
.ccenter {
  position: absolute;
  left: 498px;
  bottom: 0;
  width: 834px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.cright {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
}
.bc {
  height: 0;
  width: 0;
  position: relative;
}
.btn {
  position: absolute;
  top: 30px;
  left: -150px;
  color: #ffffff;
  background: #6e8dfb;
  border-radius: 8px;
}
.pos {
  position: absolute;
  left: 0%;
  top: 0px;
  width: 200px;
  opacity: 0.8;
  z-index: 9999;
}
</style>
